<template>
  <div class="top">
    <!-- 公共标题组件 -->
    <Header v-on:closeMenu="closeMenu" :show="showRef" />
    <div class="main404">
      <!-- 公共导航组件 -->
      <Menu v-on:showMenuByChild="showMenuByChild" />
      <div class="content404">
        <div class="imgdiv">
          <img src="../assets/img/404_bg.png" alt="">
        </div>
        <div class="worddiv">
          <p class="nopage">您访问的页面不见了！</p>
          <p class="goindex" @click="goIndex" >去首页>></p>
        </div>
      </div>
    </div>
    <!-- 网站底部组件 -->
    <div class="menu-copyright">
      <p>Copyright© 2017 - 2030 | <a target="_blank" href="https://blog.guanchao.site">时间里的</a> .AllRightsReserved</p>
    </div>
  </div>
 
</template>

<style lang="scss" scoped>
  @import "../assets/css/pc/404.scss";
</style>

<script lang="ts" setup>
  import { useRouter } from "vue-router";
  import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
} from "vue";

// 实例化路由
var router = useRouter();
/**
 * @name: 声明data
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18 
 */
const data = reactive({
    showRef: 0,
});
/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10 
  */
const {showRef} = toRefs(data);
/**
 * @name: 子组件向父组件抛出的方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18 
 */
const goIndex = ():void => {
  try{
    router.push('/pc/index')
  } 
  catch (error) 
  {
    console.log('出错了')
  }
}
// ===================================================================

</script>

